<template>
	<view class="page">
		<view class="header">
			<view class="header-info flex p30">
				<image v-if="!usermsg.avatar" src="@/static/img/avatar.png" mode="aspectFill"></image>
				<image v-if="usermsg.avatar" :src="apifun.URLimg + usermsg.avatar" mode="aspectFill"></image>
				<view class="header-username">
					<view class="header-name">{{ usermsg.username }}</view>
					<view class="header-phone">{{ usermsg.mobile }}</view>
				</view>
				<view class="header-tips" v-if="usermsg.user_type == 0">陪驾教练</view>
				<view class="header-tips" v-if="usermsg.user_type == 1">验车教练</view>
				<view class="header-tips" v-if="usermsg.user_type == 2">陪驾教练+验车师</view>
			</view>
			<view class="header-total flex">
				<view class="header-item">
					<view class="header-num">{{ usermsg.today_accept_order_count || 0 }}</view>
					<view class="header-title">今日接单</view>
				</view>
				<view class="header-item">
					<view class="header-num">{{ usermsg.today_accept_order_income || 0 }}</view>
					<view class="header-title">今日收入</view>
				</view>
				<view class="header-item">
					<view class="header-num">{{ usermsg.this_month_income || 0 }}</view>
					<view class="header-title">本月收入</view>
				</view>
				<view class="header-item">
					<view class="header-num">{{ usermsg.last_month_income || 0 }}</view>
					<view class="header-title">上月收入</view>
				</view>
				<view class="header-items" @click="apifun.navigate('/pages/my/transform')" :class="usermsg.ratio < 70 ? 'acbgcolor': usermsg.ratio < 80 ? 'gradualbgcolor':'tgbgcolor'">
					<view class="header-num">{{ usermsg.ratio || 0 }}%</view>
					<view class="header-title">转化率</view>
				</view>
			</view>
		</view>
		<view class="menu">
			<view class="menu-title">常用功能</view>
			<view class="menu-icon flex">
				<view class="menu-item" @click="apifun.navigate('/pages/my/learningCenter')">
					<image src="@/static/my/menu1.png" mode=""></image>
					<view>学习中心</view>
				</view>
				<view class="menu-item" @click="apifun.navigate('/pages/my/agreement')">
					<image src="@/static/my/menu2.png" mode=""></image>
					<view>合作协议</view>
				</view>
				<view class="menu-item" @click="apifun.navigate('/pages/my/purse')">
					<image src="@/static/my/menu3.png" mode=""></image>
					<view>我的钱包</view>
				</view>
				<view class="menu-item" @click="apifun.navigate('/pages/my/userInfo')">
					<image src="@/static/my/menu4.png" mode=""></image>
					<view>个人信息</view>
				</view>
				<view class="menu-item" @click="isPopup = true">
					<image src="@/static/my/menu5.png" mode=""></image>
					<view>联系财务</view>
				</view>
				<view class="menu-item" @click="apifun.navigate('/pages/my/feedback')">
					<image src="@/static/my/menu6.png" mode=""></image>
					<view>意见反馈</view>
				</view>
				<view class="menu-item" @click="usersq()">
					<image src="@/static/my/menu7.png" mode=""></image>
					<view>用户授权</view>
				</view>
				<view class="menu-item" @click="apifun.navigate('/pages/my/share')">
					<image src="@/static/my/menu8.png" mode=""></image>
					<view>分享</view>
				</view>
			</view>
		</view>
		<view class="btn" @click="logout">退出登录</view>

		<tn-popup v-model="isPopup" mode="center" :borderRadius="50">
			<view class="popup">
				<view class="popup-title">联系财务</view>
				<view class="popup-content">{{serveicetel}}</view>
				<view class="popup-btn flex">
					<view class="btns btn1" @click="callout">呼叫</view>
					<view class="btns btn2" @click="copyfun">复制号码</view>
				</view>
			</view>
		</tn-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPopup: false,
				usermsg: {},
				serveicetel:'',
				datas:[{id:'111',uid:'11','name':'11name'},{id:'222','uid':'22','name':'22name'},{id:'333','uid':'33','name':'33name'}]
			}
		},
		onLoad() {
			this.getservetel()
		},
		onShow() {
			this.usermsgfun()
		},
		methods: {
			usersq(){
				// let newdata = [{id:'333',uid:'33','name':'33新的name'},{id:'444',uid:'44','name':'44name'}]
				// let datas = [];
				// newdata.forEach((items,indexs)=>{
				// 	let aab = this.datas.filter((item,index)=> item.uid != items.uid);
				// 	datas = [items,...aab];  // 由于每次发信息都是推送两条信息没办法自动加
				// })
				// this.datas = datas;
				this.apifun.navigate('/pages/start/fenglogo')
			},
			usermsgfun(){
				this.apifun.unirequest('/partner/user/getUserInfo','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						uni.setStorageSync('usermsg', datas);
						this.usermsg = datas;
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			getservetel(){
				this.apifun.unirequest('/partner/index/getServiceTel','post',{},(res)=>{
					if(res.code === 200){
						let datas = res.data;
						this.serveicetel = datas.toString()
					}else{
						this.apifun.toast(res.msg)
					}
				})
			},
			callout() {
				uni.makePhoneCall({
					phoneNumber: this.serveicetel
				})
			},
			copyfun() {
				uni.setClipboardData({
					data:this.serveicetel,
					success: function () {
						uni.showToast({
							icon: 'none', //success、loading、none
							title: '复制成功',
							duration: 2000
						})
					}
				});
			},
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '确定要退出登录吗？',
					success:(res) => {
						if (res.confirm) {
							uni.clearStorageSync();
							setTimeout(() => {
								uni.reLaunch({
									url: '/pages/start/login'
								})
							}, 300)
						} else if (res.cancel) {}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.acbgcolor{
		background:#E43D30 !important;
	}
	.tgbgcolor{
		background:#00FF01 !important;
	}
	.gradualbgcolor{
		background:#0E71EB;
	}
	.popup {
		width: 600rpx;
		height: 416rpx;
		background-image: url('@/static/img/popupBg.png');
		background-size: cover;
		text-align: center;

		.popup-title {
			padding-top: 60rpx;
			font-size: 34rpx;
			color: #064155;
			font-weight: bold;
		}

		.popup-content {
			padding-top: 30rpx;
			font-size: 50rpx;
			font-weight: bold;
			color: #064155;
		}

		.popup-btn {
			padding-top: 60rpx;
			justify-content: space-evenly;

			.btns {
				width: 240rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 10rpx;
				font-size: 30rpx;
			}

			.btn1 {
				color: #1686F8;
				border: 1rpx solid #1686F8;
			}

			.btn2 {
				background: #0E71EB;
				color: #FFFFFF;
			}
		}
	}

	.header {
		width: 100%;
		height: 390rpx;
		box-sizing: border-box;
		background-image: url('@/static/my/bg.png');
		background-size: cover;

		.header-info {
			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
			}

			.header-username {
				margin-left: 40rpx;

				.header-name {
					font-size: 34rpx;
					font-weight: bold;
				}

				.header-phone {
					margin-top: 14rpx;
					font-size: 24rpx;
				}
			}

			.header-tips {
				padding:0 20rpx;
				height: 44rpx;
				line-height: 44rpx;
				text-align: center;
				border-radius: 10rpx;
				opacity: 1;
				background: #0E71EB;
				font-size: 24rpx;
				color: #ffffff;
				margin-bottom: 40rpx;
			}
		}

		.header-total {
			margin-top: 60rpx;
			padding-left: 30rpx;
			// width: 80%;
			justify-content: space-between;

			.header-item {
				text-align: center;

				.header-num {
					font-size: 34rpx;
					font-weight: bold;
				}

				.header-title {
					margin-top: 10rpx;
					font-size: 24rpx;
					color: #666666;
				}
			}
			
			.header-items {
				text-align: center;
				width: 132rpx;
				height: 110rpx;
				border-radius: 60rpx 0px 0px 60rpx;
				padding-top: 16rpx;
				box-sizing: border-box;
				color: #ffffff;
				
				.header-num {
					font-size: 34rpx;
					font-weight: bold;
				}

				.header-title {
					margin-top: 8rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	.menu {
		width: 100%;
		height: 500rpx;
		border-radius: 20rpx;
		opacity: 1;
		background: #FFFFFF;
		padding: 30rpx;
		box-sizing: border-box;

		.menu-title {
			font-size: 30rpx;
			font-weight: bold;
		}

		.menu-icon {
			flex-wrap: wrap;
			margin-top: 60rpx;

			.menu-item {
				width: 25%;
				text-align: center;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				view {
					margin-top: 16rpx;
					font-size: 28rpx;
					margin-bottom: 80rpx;
				}
			}
		}
	}

	.btn {
		margin-top: 100rpx;
		background: #EDEDED;
		width: 550rpx;
		border-radius: 10rpx;
	}
</style>